<template>
  <div class="mainBox">
    <!-- 筛选区域 -->
    <div class="filter-bar">
      <van-dropdown-menu active-color="#1989fa">
        <van-dropdown-item
          v-model="selectedDistrict"
          :options="districtOptions"
          @change="onDistrictChange"
        />
      </van-dropdown-menu>
    </div>
    <div style="border-radius: 4px; background-color: #fff">
      <div class="item" v-for="item in companyList" :key="item.id">
        <div class="companyTit">{{ item.companyName }}</div>
        <div class="phone">
          <van-icon
            name="phone-o"
            size="16px"
            style="margin-right: 4px; vertical-align: text-bottom"
          />
          联系电话：{{ item.phone }}
        </div>
        <div class="phone">
          <van-icon
            name="location-o"
            size="16px"
            style="margin-right: 4px; vertical-align: text-bottom"
          />
          企业地址：{{ item.location }}
        </div>
        <div class="phone">
          <van-icon
            name="label-o"
            size="16px"
            style="margin-right: 4px; vertical-align: text-bottom"
          />
          企业资质：{{ item.zizhi }}
          <span class="seedetail" @click="handleGo(item)">查看</span>
        </div>
        <div v-if="item.expanded" class="fee-section">
          <div class="section-title">收费标准</div>
          <div class="image-list">
            <div
              v-for="(image, index) in item.images"
              :key="index"
              class="image-item"
              @click="previewImages(item.images, index)"
            >
              <img :src="image" :alt="`收费标准 ${index + 1}`" />
            </div>
          </div>
        </div>
        <div class="expand-btn">
          <div class="radius" @click="toggleExpand(item)">
            <van-icon
              :name="item.expanded ? 'arrow-up' : 'arrow-down'"
              class="myIcon"
              size="16"
              color="#999"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "firstPage",
  data() {
    return {
      selectedDistrict: 0, // 默认选中第一个选项
      districtOptions: [
        { text: "全部", value: 0 },
        { text: "浦东新区", value: 1 },
        { text: "黄浦区", value: 2 },
        { text: "静安区", value: 3 },
        { text: "徐汇区", value: 4 },
        { text: "长宁区", value: 5 },
        { text: "普陀区", value: 6 },
        { text: "虹口区", value: 7 },
        { text: "杨浦区", value: 8 },
        { text: "闵行区", value: 9 },
        { text: "宝山区", value: 10 },
        { text: "嘉定区", value: 11 },
        { text: "金山区", value: 12 },
        { text: "松江区", value: 13 },
        { text: "青浦区", value: 14 },
        { text: "奉贤区", value: 15 },
        { text: "崇明区", value: 16 },
      ],
      companyList: [
        {
          companyName: "上海上昆杀虫科技有限公司",
          phone: "13788889999",
          location: "三林路337号601室",
          zizhi: "企业资质、具体资质情况",
          images: [
            "https://picsum.photos/200/200?random=",
            "https://picsum.photos/200/200?random=",
            "https://picsum.photos/200/200?random=",
          ],
          expanded: false,
          id: 1,
        },
      ],
    };
  },
  methods: {
    handleGo(item) {
      console.log(item, "0000");
      this.$router.push({
        name: "qualifiCation",
        params: { id: "test" },
      });
    },
    onDistrictChange(value) {
      console.log("选择的区域:", this.districtOptions[value].text);
      // 这里可以根据选择的区域筛选数据
      // 例如：this.filterCompanyList(this.districtOptions[value].text);
    },
    toggleExpand(company) {
      company.expanded = !company.expanded;
    },
    previewImages(images, startPosition) {
      import("vant").then(({ ImagePreview }) => {
        ImagePreview({
          images,
          startPosition,
          closeable: true,
          closeIconPosition: "top-right",
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.mainBox {
  font-family:
    PingFangSC,
    PingFang SC;
  padding: 15px;
  .filter-bar {
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 15px;
    position: sticky;
    top: 44px;
    z-index: 99;
  }
  .item {
    // background-color: #fff;
    padding: 13px 15px 0 13px;
    .companyTit {
      color: #333333;
      font-size: 16px;
      font-weight: 700;
    }
    .phone {
      font-size: 12px;
      color: #999;
      margin-top: 12px;
    }
  }
  .fee-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;

    .section-title {
      margin-bottom: 12px;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #333;
    }

    .image-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .image-item {
        width: calc((100% - 16px) / 3);
        height: 80px;
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 6px;
        }
      }
    }
  }
  .expand-btn {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .radius {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #f3f3fa;
      text-align: center;
      position: relative;
      left: 50%;
      bottom: 0;
      transform: translate(-16px, 13px);
    }
    .myIcon {
      vertical-align: text-top;
    }
  }
  .seedetail {
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 13px;
    margin-left: 2px;
    color: #1890ff;
  }
}
</style>
